<template>
    <div class="page">
        <searchbar @input="input" ></searchbar>
            <scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :enable-infinite=enableInfinite style="margin-bottom:50px;margin-top: 44px; background: #f2f2f2">

                <div class='content-padded' id="list">
                    <!--<h2>current time: {{time}}</h2>-->
                    <!--<h3>Pull to refresh and infinite scroll</h3>-->
                    <div v-if="nodata" style="    width: 150px;height: 170px;margin: 0 auto;margin-top: 10.625rem;">
                        <img src="../assets/images/record_none_image@2x.png" alt="">
                    </div>
                    <div class="report-text" style="top: 0px;">
                    <template v-for=" (time,index) in listContent">
                        <ul class="report-list " @click="btnSueecss(index)" data-id=${obj.id}  data-token=${obj.token} data-status=${obj.status}  data-red=${obj.red} >
                            <li class="re-li">
                                <!-- 修改备注-->
                                <div id="remarkText" @click.stop="remock(index)" style="position: absolute;right: 0;width: 24px; z-index: 999">
                                    <img  src="../assets/images/record_remark_icon@2x.png" alt="">
                                </div>

                                <!--车标-->
                                <div class="re-img">
                                    <img onerror="javascript:this.src='../assets/images/daiti.png'" :src=time.img_url alt="车标"/>
                                </div>
                                <!--车标-->
                                <div class="over">
                                    <span> {{time.vin_details}}</span>
                                    <span> VIN:{{time.vin | istext}}</span>
                                </div>
                                <!--状态-->
                                <p class="float_rt">{{time.status| is_erorr}}<i v-if="time.is_read!=1" class='dianDian'></i></p>
                            </li>
                            <li class="re-li">
                                <p> {{time.date}} </p>
                                <p class="float_rt">{{time.query_price}}元</p>
                            </li>
                            <li class="re-li borBttom" v-if="time.remark">
                                <p>
                                    备注：{{time.remark}}
                                </p>
                            </li>
                        </ul>
                    </template>
                    </div>
                </div>
            </scroll>

    </div>
</template>

<script>
//    import { SimpleHeader } from '../components/header'
//    import Content from '../components/content'
    import Scroll from './soes/scroll.vue'
import Searchbar from './soes/searchbar/index.vue'

    export default {
        components: {
            Scroll,
            Searchbar
        },
        data () {
            return {
                time: new Date(),
                nodata:true,
                //禁止下拉刷新  true 不禁止 else  禁止
                enableInfinite:false,
                listContent:[],
                rcuu:2
            }
        },
        methods: {
                red_dd(id){
                    this.$http.post('http://api.mayinvwang.com/index.php/Appjson/updateDot',
                        {
                            id: id
                        }).then((res)=>{
                        console.log('红点去除成功' )
                        console.log(res.data)
                    })
                },
            remock(e){
                    this.$router.push({name:'remark',query:this.listContent[e]})
            },
            btnSueecss(e){
                console.log(this.listContent[e].status);
               if( this.listContent[e].status=='2'){
                   window.location.href="https://api.mayinvwang.com/webview/oldTuwens/?token="+this.listContent[e].token
                }else if(this.listContent[e].status == "1" || this.listContent[e].status=="0"){
                   //查询中
//                   this.$router.push({name:'chaxunMiddle',query:this.listContent[e]})
                }else if (this.listContent[e].status== "3") {
                    //  status = "查询失败"
//                 this.$router.push({name:'chaxunRerror',query:this.listContent[e]});

//                   location.href="./selectSueccess3.html";
                   this.red_dd(this.listContent[e].id);
                   this.$router.push({name:'chaxunNO',query:this.listContent[e]});
                } else if (this.listContent[e].status=="4") {
                    this.red_dd(this.listContent[e].id);
                    // status = "查询驳回"
                   this.$router.push({name:'chaxunBohui',query:this.listContent[e]});
                } else if (this.listContent[e].status == "5") {
                    //status = "查无记录"
                   this.red_dd(this.listContent[e].id);
                   this.$router.push({name:'chaxunNO',query:this.listContent[e]});
                }

            },
            onRefresh (done) {

                let self = this
                setTimeout(function () {

                    self.updata(1);
                    done()  // call done
                }, 2000)
            },
            input (v) {
                let _this=this
                console.log(v);
                this.$http.post("http://api.mayinvwang.com/index.php/ImageQuery/filter_3_0_1",
                    {user_id: this.$store.state.user_id||sessionStorage['user_id'], remark: v }).then(
                    (res)=>{
                        console.log(res.data);
                        if(res.data.status == "0"){
                            this.nodata=true;
                            this.enableInfinite=false;
                            this.listContent=[]
                        }else{
                            this.listContent=[]
                            this.nodata=false;
                            this.enableInfinite=true;
                            console.log(res.data);
                            this.listContent=  res.data.list;
//                            res.data.list.forEach(function(val,index){
//                                _this.listContent.push(val);
                                // console.log(val);
//                            });
                        }
                    },
                    ()=>{},
                )
            },
            onInfinite (done) {
                console.log('infinite');
                 let rcuu=this.rcuu++;
                 console.log(rcuu);
                setTimeout( ()=> {
                    var f = document.createDocumentFragment()
//                    for (let i = 0; i < 10; i++) {
//                        let p = document.createElement('p')
//                        p.textContent = 'Write some HTML, grab some JSON, create a Vue instance, that\'s it.'
//                        f.appendChild(p)
//                    }
//                    document.getElementById('list').appendChild
                    this.updata(rcuu);
                    done()  // call done()
                }, 2000)
//                this.updata(2);
//                done()  // call done()
            },
            updata(ruu){
                let _this=this
                this.$http.post('http://api.mayinvwang.com/index.php/ImageQuery/filter_3_0_1',
                    {
                        user_id: this.$store.state.user_id||sessionStorage['user_id'],//158504,
                        page_num:ruu,
                        num:10
                    }).then((res)=>{
                        console.log(res.data);
                        console.log(this.$store.state.user_id||sessionStorage['user_id']);
                        if(res.data.status == "0"){
                            this.nodata=true;
                            this.enableInfinite=false;
                        }else{
                            this.nodata=false;
                            this.enableInfinite=true;
                            console.log(res.data);
//                            this.listContent=  res.data.list;
                            if(ruu==1){
                                _this.listContent=res.data.list;
                            }else{
                                res.data.list.forEach(function(val,index){
                                    _this.listContent.push(val);
                                    // console.log(val);
                                });
                            }

                        }
                    },
                    ()=>{}
                )
            }
        },
        created (){
            this.updata(1)
        },
        filters:{
            //vin
            istext(value){
                if(value.lastIndexOf(".") != -1){
                   return '上传图片查询'
                }else{
                    return value
                }
            },
            //状态选择
            is_erorr(value){
                if (value == "1"||value=="0") {
                    return "查询中"
                } else if (value == "2") {
                    return "查询成功"
                } else if (value == "3") {
                    return "查询失败"
                } else if (value == "4") {
                    return "查询驳回"
                } else if (value == "5") {
                    return "查无记录"
                }
            }

        }
    }
</script>
<style>

    @keyframes preloader-spin {
        100% {
            transform: rotate(360deg);
        }
    }
    /*
    .hairline(@position, @color) when (@position = top) {
      border-top: 1px solid @color;
    }
    .hairline(@position, @color) when (@position = left) {
      border-left: 1px solid @color;
    }
    .hairline(@position, @color) when (@position = bottom) {
      border-bottom: 1px solid @color;
    }
    .hairline(@position, @color) when (@position = right) {
      border-right: 1px solid @color;
    }
    // For right and bottom
    .hairline-remove(@position) when not (@position = left) and not (@position = top) {
      border-left: 0;
      border-bottom: 0;
    }
    // For left and top
    .hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
      border-right: 0;
      border-top: 0;
    }
    // For right and bottom
    .hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
      border-right-color: @color;
      border-bottom-color: @color;
    }
    // For left and top
    .hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
      border-left-color: @color;
      border-top-color: @color;
    }*/

    .icon {
        font-style: normal;
        font-family: 'iconfont-vuem';
    }
    .icon.icon-success:before {
        content: "\E600";
    }
    .icon.icon-error:before {
        content: "\E601";
    }
    .icon.icon-back:before {
        content: "\E602";
    }
    .icon.icon-search:before {
        content: "\E603";
    }
    .icon.icon-clear:before {
        content: "\E604";
    }
    .icon.icon-error-fill:before {
        content: "\E605";
    }
    .icon.icon-success-fill:before {
        content: "\E606";
    }
    .icon.icon-forbidden-fill:before {
        content: "\E607";
    }
    .icon.icon-link:before {
        content: "\E608";
    }
    .icon.icon-star:before {
        content: "\E609";
    }
    .icon.icon-star-fill:before {
        content: "\E60A";
    }
    .report-list {
        background: #fff;
        margin-top: 7px;
    }
    /*.report-text .report-list:last-child{*/
        /*margin-bottom: 55px;*/
    /*}*/
    .report-text .report-list:first-child{
        margin-top: 0;
    }
</style>